<template>
  <div>
    <div v-for="(item) in dlist" :key="item.title" class="config-box">
      <div class="c-title">
        <div class="flex-c c-title-name">
          <i @click="item.isOpen=!item.isOpen" style="cursor: pointer;" :class="item.isOpen?'el-icon-caret-bottom':'el-icon-caret-right'"></i>
          <div style="margin-left:5px;">{{item.title}}</div>
        </div>
        <el-button v-show="item.edit" type="text" @click.stop="item.edit">编辑</el-button>
      </div>
      <div class="items" v-show="item.isOpen">
        <div class="flex-c item" v-for="item2 in item.dataList" :key="item2.label+item2.value">
          <div style="min-width:80px;">{{item2.label}}:</div>
          <div style="min-width:85px;">{{item2.value}}</div>
        </div>
      </div>
    </div>
      <div class="config-box">
        <div class="c-title">
          <div class="flex-c c-title-name">
            <i @click="isOpen=!isOpen" style="cursor: pointer;" :class="isOpen?'el-icon-caret-bottom':'el-icon-caret-right'"></i>
            <div style="margin-left:5px;">申请时长</div>
          </div>
        </div>
        <div class="items" v-show="isOpen">
          <div class="flex-c item" >
            <div style="min-width:80px;">申请时长:</div>
            <div style="min-width:85px;">
              <el-radio-group v-model="timeNum">
                <el-radio label="不限"></el-radio>
                <el-radio label="1年"></el-radio>
                <el-radio label="自定义"></el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
      return {
        dlist:[
          {
            isOpen:true,
            title:'基础配置',
            edit: ()=>this.$emit('edit',1),
            dataList:[
              {label:'可用分区',value:'裸金属资源池'},
              {label:'数据源',value:'pudssa.o3 | 160核 | 256GB'},
              {label:'容量（GiB）',value:'pudssa.o3 | 160核 | 256GB'},
              {label:'磁盘类型',value:'1'},
              {label:'磁盘名称',value:'裸金属资源池'},
              {label:'是否共享',value:'是'},
              {label:'申请数量',value:'1'},
            ]
          },
        ],
        isOpen:true,
        timeNum:'不限'
      }
    }
  }
</script>

<style scoped lang="less">
.config-box{
  border: 1px #e9e9e9 solid;
  border-bottom: 0px;
  margin: 30px 0;
  border-radius: 2px;
  .c-title{
    height: 48px;
    border-bottom: 1px rgba(233, 233, 233, 1) solid;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    .c-title-name{
      margin:0 20px;
    }
  }
  .items{
    padding: 25px;
    // height: 300px;
    border-bottom: 1px rgba(233, 233, 233, 1) solid;
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    .item{
      width: 25%;
      margin-bottom: 20px;
    }
  }
}
</style>
